<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="yellow"></div>
    <div class="yellow"></div>
    <div class="yellow"></div>
    <div class="yellow"></div>
    <div class="yellow"></div>
    <div class="yellow"></div>
    <div class="yellow"></div>
    <div class="yellow"></div>
    <div class="yellow"></div>
    <div class="yellow"></div>
    <div class="yellow"></div>
    <div class="red">
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180403%2Ff401c113aa10441c96182560550db954.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627969075&t=cda21de017501ac89a3d5f53b79c17dd"
        alt=""
        srcset=""
        class="wth"
        loading="lazy"
      />
    </div>
    <!-- <span>我去</span>
    <span>我去</span>
    <span>我去</span>
    <span>我去</span>
    <span>我去</span>
    <span>我去</span>
    <span>我去</span> -->
  </body>
  <style>
    .red {
      background: red;
      width: 1000px;
      height: 1000px;
    }
    * {
      margin: 0%;
      padding: 0%;
    }
    .wth {
      width: 500px;
      vertical-align: middle;
    }
    .yellow {
      width: 200px;
      height: 300px;
      background: yellow;
    }
  </style>
</html>
